<template>
  <el-table :data="searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            max-height="600"
            style="width: 100%">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="编号" width="100">
      <template #default="scope">
        {{scope.row.key}}
      </template>
    </el-table-column>
    <el-table-column label="商品名称" width="240">
      <template #default="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="商品价格（元）" width="240">
      <template #default="scope">
        {{scope.row.price}}
      </template>
    </el-table-column>
    <el-table-column label="已售数量（个）" width="240">
      <template #default="scope">
        {{scope.row.num}}
      </template>
    </el-table-column>
    <el-table-column label="商品风格" width="240">
      <template #default="scope">
        {{scope.row.style}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button>
        <el-button
            size="small"
            class="button"
            type="warning"
            @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="display: flex;justify-content: center;margin: 20px 0"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="searchList.length"
      @update:current-page="currentPage"
      @current-change="handleCurrentChange"
      class="mt-4"
  />
  <el-dialog
      v-model="dialogVisible"
      title="修改数据"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
      <el-form-item
          prop="name"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          label="商品名称">
        <el-input v-model.trim="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="price"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          label="商品价钱">
        <el-input v-model.number="formInline.price" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="num"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          label="商品数量">
        <el-input v-model.number="formInline.num" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          prop="style"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          label="商品风格">
        <el-input v-model="formInline.style" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="primary" @click="onSubmit(formRef)">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref,onMounted,computed,reactive} from "vue";
import useStore from "../../modules/store/proList";
import {ElMessageBox,FormInstance} from "element-plus";
var store = useStore()
console.log(store)
// 数据渲染的列表
const searchList = computed(() => store.searchList);
// console.log(searchList.length)
console.log(searchList.value.length)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
let key:number = ref(0)
// 定义了一个类型判定
interface User {
  key: number
  name: string
  num: number
  price: number
  style: string
}
const formInline = reactive({
  name: '',
  price: 0,
  num: 0,
  style: ''
})
// 每页显示的条数
const pageSize = ref(5);
// 默认显示的页数
const currentPage = ref(1);
// 修改内容的事件触发
// fetchData(currentPage.value);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
// const onSubmit = () => {
//   // console.log(formInline.value)
//   dialogVisible.value = false
// }
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(formEl)
  formEl.validate((valid:boolean) => {
    if (valid) {
      dialogVisible.value = false
      store.edit(formInline,key)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const handleEdit = (index: number, row: User) => {
  dialogVisible.value = true
  console.log(index, row)
  key = row.key
  formInline.name=  row.name
  formInline.price = row.price;
  formInline.num = row.num;
  formInline.style = row.style;
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
  store.filterA(row.key)
}
const handleCurrentChange = (val: object)=> {
  console.log(typeof(val))
  // @ts-ignore
  currentPage.value = val
}
// 渲染完成时发送一个请求
onMounted(()=>{
  // var store = useStore()
  // console.log(store)
  store.http()
  console.log(store.searchList)
 });
</script>


<style lang="scss" scoped>

</style>
